<template>
	<view class="wrap">
		<view class="balance app_flex-aicjcsb">
			<view class="balance-L fw">
				<view class="balance-total">￥{{balance}}</view>
				<view class="balance-title">账户余额</view>
			</view>
			<view class="balance-btn app_flex-aicjcc" @click="onSkipTap('topup')">充值</view>
		</view>
		<view class="base">
			<view class="base-title">数据看板</view>
			<view class="base-main app_flex-jcsb">
				<view class="base-main_item total-item">
					<view>￥{{totalStat.consumptionCount || 0}}</view>
					<view class="app_arrow" @click.stop="onSkipTap('consumeDetail')">消费数据</view>
				</view>
				<!-- <view class="base-main_item total-item">
					<view>{{totalStat.revealCount}}</view>
					<view>展现量</view>
				</view> -->
				<view class="base-main_item total-item">
					<view>{{totalStat.clickCount || 0}}</view>
					<view>点击量</view>
				</view>
			</view>
			<view class="base-nav u-flex">
				<view class="base-borderBox" :style="{left: `${filterDateIndex * 110}rpx`}"
					:class="{first: filterDateIndex == 0,last: filterDateIndex == 5}"></view>
				<view class="base-nav_item app_flex-aicjcc" :class="{active: index == filterDateIndex}"
					v-for="(item, index) in filterDateList" :key="index" @click="onFilterNavTap(index)">
					{{item.name}}
				</view>
			</view>
			<view class="base-main app_flex-jcsb">
				<view class="base-main_item" :class="{active: chartCatIndex == index}" @click="onChartCatItemTap(index)"
					v-for="(item, index) in chartCatList" :key="item.type">
					<view v-if="item.type == 1">￥{{totalStatDate.consumptionCount || 0}}</view>
					<view v-if="item.type == 2">{{totalStatDate.revealCount || 0}}</view>
					<view v-if="item.type == 3">{{totalStatDate.clickCount || 0}}</view>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="img">
			<image src="../../static/images/img-quxiantu.jpg" mode=""></image>
		</view> -->
		<view class="charts-box">
			<qiun-data-charts type="demotype" :chartData="chartData" :disableScroll="true"
				:loadingType="0" background="none" :ontouch="true" :animation="false" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0,
				filterDateIndex: 0,
				filterDateList: [{
					name: '今日',
					type: 1
				}, {
					name: '昨日',
					type: 2
				}, {
					name: '近7天',
					type: 3
				}, {
					name: '上周',
					type: 4
				}, {
					name: '本月',
					type: 5
				}, {
					name: '上月',
					type: 6
				}],
				chartCatList: [{
					name: '消费数据',
					type: 1
				},
				// {
				// 	name: '展现量',
				// 	type: 2
				// }, 
				{
					name: '点击量',
					type: 3
				}],
				chartCatIndex: 0,
				totalStat: {},
				totalStatDate: {},
				chartData: {}, // 图标数据
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onUnload() {
			uni.$off('update-dataBoard', this.updatePage)
		},
		methods: {
			updatePage() {
				this.getTotalBalance()
				this.getTotalStat()
				this.getStatByDate()
				this.getChartData()
			},
			onFilterNavTap(index) {
				this.filterDateIndex = index
				this.getStatByDate()
				this.getChartData()
			},
			onChartCatItemTap(index) {
				this.chartCatIndex = index
				this.getChartData()
			},
			onSkipTap(type, index) {
				const urlObj = {
					consumeDetail: '/pages/marketingManagement/consumeDetail',
					topup: () => {
						uni.$off('update-dataBoard', this.updatePage)
						uni.$on('update-dataBoard', this.updatePage)
						uni.navigateTo({
							url: '/pages/wallet/topup'
						})
					}
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			/**
			 * 账户余额
			 */
			getTotalBalance() {
				this.$g_api.promotionBalance().then(({
					data
				}) => {
					this.balance = data
				})
			},
			/**
			 * 数据看板
			 */
			getTotalStat() {
				this.$g_api.promotionStatisticsTotal().then(({
					data
				}) => {
					if (data) {
						this.totalStat = data
					}
				})
			},
			/**
			 * 通过周期获取数据
			 */
			getStatByDate() {
				this.$g_api.promotionStatisticsDate({
					dateType: this.filterDateList[this.filterDateIndex].type
				}).then(({
					data
				}) => {
					if (data) {
						this.totalStatDate = data
					}
				})
			},
			/**
			 * 获取折线图数据
			 */
			getChartData() {
				// this.chartData = {
				// 	categories: [],
				// 	series: []
				// }
				uni.showLoading({
					title: '加载中...'
				})
				this.$g_api.promotionStatisticsChart({
					dataCategory: this.chartCatList[this.chartCatIndex].type,
					dateType: this.filterDateList[this.filterDateIndex].type
				}).then(({
					data
				}) => {
					uni.hideLoading()
					let categories = [],
						series = [{
							name: '数据',
							data: []
						}]
					if (data?.length > 0) {
						data.forEach(item => {
							categories.push(item.timeData.slice(5))
							series[0].data.push(item.data)
						})
					}
					this.chartData = {
						categories,
						series
					}
				}).catch(err => {
					console.log(err);
					console.log('heheheh');
					uni.hideLoading()
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.wrap {
		padding-bottom: 100rpx;
	}
	.balance {
		margin: 30rpx auto 0;
		width: 710rpx;
		height: 160rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background: linear-gradient(90deg, #6699FF, #3377FF);
	}

	.balance-L {}

	.balance-total {
		font-size: 36rpx;
	}

	.balance-title {
		font-size: 26rpx;
		color: #B2CCFF;
	}

	.balance-btn {
		width: 140rpx;
		height: 70rpx;
		font-size: 30rpx;
		border-radius: 36rpx;
		color: $g-main-color;
		background-color: #fff;
	}

	.base {}

	.base-title {
		padding: 50rpx 0 40rpx 30rpx;
		font-size: 30rpx;
		line-height: 1;
		font-weight: bold;
	}

	.base-nav {
		position: relative;
		width: 660rpx;
		margin: 40rpx auto;
	}

	.base-borderBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 110rpx;
		height: 60rpx;
		border: 1px solid $g-main-color;
		box-sizing: border-box;

		&.first {
			border-radius: 10rpx 0 0 10rpx;
		}

		&.last {
			border-radius: 0 10rpx 10rpx 0;
		}
	}

	.base-nav_item {
		height: 60rpx;
		width: 110rpx;
		box-sizing: border-box;
		border-top: 1px solid #e6e6e6;
		border-left: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
		font-size: 26rpx;

		&:nth-last-child(6) {
			border-radius: 10rpx 0 0 10rpx;
		}

		&:nth-last-child(1) {
			border-radius: 0 10rpx 10rpx 0;
			border-right: 1px solid #e6e6e6;
		}

		&.active {
			color: $g-main-color;
			background-color: #E5EEFF;
		}
	}

	.base-main {
		padding: 0 30rpx;
	}

	.base-main_item {
		// width: 220rpx;
		flex: 1;
		margin-right: 20rpx;
		padding: 26rpx 16rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #f7f7f7;

		&.active {
			color: #fff;
			background-color: $g-main-color;

			view {
				&:last-child {
					color: #fff;

					&::after {
						border-color: #fff;
					}
				}
			}
		}

		view {
			&:first-child {
				word-break: break-all;
				width: 188rpx;
				margin-bottom: 8rpx;
				font-size: 26rpx;
				font-weight: bold;
			}

			&:last-child {
				display: inline-block;
				font-size: 24rpx;
				color: #999;
			}
		}

	}

	.img {
		margin: 44rpx auto 0;
		width: 655rpx;

		image {
			width: 655rpx;
			height: 509rpx;
		}
	}

	.total-item {
		box-shadow: 0 0 20rpx 10rpx #f3f3f3;
		background-color: #fff;
	}

	.charts-box {
		padding-top: 30rpx;
		width: 750rpx;
		height: 500rpx;
	}
</style>
